<template>
  <el-dialog title="提现申请详情" v-model="visible" width="1200px" append-to-body @close="handleClose">
    <el-descriptions :column="2" border class="mb-4">
      <el-descriptions-item label="申请编号">{{ detail.withdrawId }}</el-descriptions-item>
      <el-descriptions-item label="申请标题">{{ detail.title }}</el-descriptions-item>
      <el-descriptions-item label="公寓名称">{{ detail.apartmentName }}</el-descriptions-item>
      <el-descriptions-item label="提现金额">
        <span class="amount-text">¥{{ detail.amount }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="收款账户">{{ detail.paymentAccountName }}</el-descriptions-item>
      <el-descriptions-item label="银行账号">{{ detail.bankAccount }}</el-descriptions-item>
      <el-descriptions-item label="开户行">{{ detail.bankName }}</el-descriptions-item>
      <el-descriptions-item label="持卡人">{{ detail.accountHolder }}</el-descriptions-item>
      <el-descriptions-item label="审核状态">
        <dict-tag :options="withdraw_audit_status" :value="detail.auditStatus"/>
      </el-descriptions-item>
      <el-descriptions-item label="支付状态">
        <dict-tag :options="withdraw_payment_status" :value="detail.paymentStatus"/>
      </el-descriptions-item>
      <el-descriptions-item label="申请时间" :span="2">{{ parseTime(detail.applyTime) }}</el-descriptions-item>
      <el-descriptions-item label="审核时间" :span="2" v-if="detail.auditTime">{{ parseTime(detail.auditTime) }}</el-descriptions-item>
      <el-descriptions-item label="审核人" :span="2" v-if="detail.auditor">{{ detail.auditor }}</el-descriptions-item>
      <el-descriptions-item label="审核备注" :span="2" v-if="detail.auditRemark">{{ detail.auditRemark }}</el-descriptions-item>
      <el-descriptions-item label="支付时间" :span="2" v-if="detail.paymentTime">{{ parseTime(detail.paymentTime) }}</el-descriptions-item>
      <!-- 打款信息 - 只有已支付状态才显示 -->
      <el-descriptions-item label="打款凭证" :span="2" v-if="detail.paymentStatus === '1' && detail.paymentVoucher">
        <div class="payment-voucher">
          <image-preview 
            :src="detail.paymentVoucher" 
            :width="120" 
            :height="80"
          />
          <el-link :href="detail.paymentVoucher" target="_blank" class="voucher-link">
            <el-icon><Download /></el-icon>
            查看原图
          </el-link>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="打款备注" :span="2" v-if="detail.paymentStatus === '1' && detail.paymentRemark">
        {{ detail.paymentRemark }}
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 关联账单列表 -->
    <associate-bills-table 
      :withdraw-id="detail.withdrawId" 
      v-if="detail.withdrawId"
    />
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { Download } from '@element-plus/icons-vue'
import AssociateBillsTable from './AssociateBillsTable.vue'

const { proxy } = getCurrentInstance()
const { withdraw_audit_status, withdraw_payment_status } = proxy.useDict('withdraw_audit_status', 'withdraw_payment_status')

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  detail: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.amount-text {
  color: #f56c6c;
  font-weight: bold;
}

.mb-4 {
  margin-bottom: 16px;
}

.payment-voucher {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voucher-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.voucher-link .el-icon {
  font-size: 16px;
}
</style> 